<template>
    <div>
        <ul class="flex ul1 pw100 cf sb">
            <li class="bg1 mr20 flex_j column ft20 plr20 ptb20 tac">
                <p class="flex column">
                    <i>销售额</i>
                    <i class="mt10 nw">{{inf.salesAmount}}元</i>
                </p>
                <p class="bdb mlr20 mtb10"></p>
                <div class="flex flex_sa">
                    <p class="flex  column">
                        <i>{{inf.salesAmountM}}元</i>
                        <i class="mt10 nw">本月销售额</i>
                    </p>
                    <p class="bdl mlr20"></p>
                    <p class="flex  column">
                        <i>{{inf.salesAmountYD}}元</i>
                        <i class="mt10 nw">昨日销售额</i>
                    </p>
                </div>
            </li>
            <li class="bg2 mr20 flex_j column ft20 plr20 ptb20 tac">
                <p class="flex column">
                    <i>订单数量</i>
                    <i class="mt10 nw">{{inf.orderConut}}单</i>
                </p>
                <p class="bdb mlr20 mtb10"></p>
                <div class="flex flex_sa">
                    <p class="flex  column">
                        <i>{{inf.orderConutM}}单</i>
                        <i class="mt10 nw">本月订单数</i>
                    </p>
                    <p class="bdl mlr20"></p>
                    <p class="flex  column">
                        <i>{{inf.orderConutYD}}单</i>
                        <i class="mt10 nw">昨日订单数</i>
                    </p>
                </div>
            </li>
            <li class="bg3 mr20 flex_j column ft20 plr20 ptb20 tac">
                <p class="flex column">
                    <i>退款金额</i>
                    <i class="mt10 nw">{{inf.refundAmount}}元</i>
                </p>
                <p class="bdb mlr20 mtb10"></p>
                <div class="flex flex_sa">
                    <p class="flex  column">
                        <i>{{inf.refundAmountM}}元</i>
                        <i class="mt10 nw">本月退款金额</i>
                    </p>
                    <p class="bdl mlr20"></p>
                    <p class="flex  column">
                        <i>{{inf.refundAmountYD}}元</i>
                        <i class="mt10 nw">昨日退款金额</i>
                    </p>
                </div>
            </li>
            <li v-if="role==2" class="bg1 mr20 flex_j column ft20 plr20 ptb20 tac">
                <p class="flex column">
                    <i>充值金额</i>
                    <i class="mt10 nw">{{inf.topupAmount}}元</i>
                </p>
                <p class="bdb mlr20 mtb10"></p>
                <div class="flex flex_sa">
                    <p class="flex  column">
                        <i>{{inf.topupAmountM}}元</i>
                        <i class="mt10 nw">本月充值金额</i>
                    </p>
                    <p class="bdl mlr20"></p>
                    <p class="flex  column">
                        <i>{{inf.topupAmountYD}}元</i>
                        <i class="mt10 nw">昨日充值金额</i>
                    </p>
                </div>
            </li>
        </ul>
        <div class="flex mt10">
            <div class="bg6 flex_j column cf ph100 ft20  plr20 ">
                <i>生</i>
                <i class="mt10">鲜</i>
                <i class="mt10">柜</i>
            </div>
            <ul class="flex ul1 ml10 flex1 cf sb">
                <li class="bg6 flex_j column mr20 ft20 plr20 ptb20 tac">
                    <p class="flex column">
                        <i>销售额</i>
                        <i class="mt10 nw">{{inf.eqSalesAmount}}元</i>
                    </p>
                    <p class="bdb mlr20 mtb10"></p>
                    <div class="flex flex_sa">
                        <p class="flex  column">
                            <i>{{inf.eqSalesAmountM}}元</i>
                            <i class="mt10 nw">本月销售额</i>
                        </p>
                        <p class="bdl mlr20"></p>
                        <p class="flex  column">
                            <i>{{inf.eqSalesAmountYD}}元</i>
                            <i class="mt10 nw">昨日销售额</i>
                        </p>
                    </div>
                </li>
                <li class="bg6 flex_j column mr20 ft20 plr20 ptb20 tac">
                    <p class="flex column">
                        <i>订单数量</i>
                        <i class="mt10 nw">{{inf.eqOrderConut}}单</i>
                    </p>
                    <p class="bdb mlr20 mtb10"></p>
                    <div class="flex flex_sa">
                        <p class="flex  column">
                            <i>{{inf.eqOrderConutM}}单</i>
                            <i class="mt10 nw">本月订单数</i>
                        </p>
                        <p class="bdl mlr20"></p>
                        <p class="flex  column">
                            <i>{{inf.eqOrderConutYD}}单</i>
                            <i class="mt10 nw">昨日订单数</i>
                        </p>
                    </div>
                </li>
                <li class="bg6 flex_j column mr20 ft20 plr20 ptb20 tac">
                    <p class="flex column">
                        <i>退款金额</i>
                        <i class="mt10 nw">{{inf.eqRefundAmount}}元</i>
                    </p>
                    <p class="bdb mlr20 mtb10"></p>
                    <div class="flex flex_sa">
                        <p class="flex  column">
                            <i>{{inf.eqRefundAmountM}}元</i>
                            <i class="mt10 nw">本月退款金额</i>
                        </p>
                        <p class="bdl mlr20"></p>
                        <p class="flex  column">
                            <i>{{inf.eqRefundAmountYD}}元</i>
                            <i class="mt10 nw">昨日退款金额</i>
                        </p>
                    </div>
                </li>
                <li class="bg6 flex_j column mr20 ft20 plr20 ptb20 tac">
                    <p class="flex column">
                        <i>设备数量</i>
                        <i class="mt10 nw">{{inf.eqCount}}台</i>
                    </p>
                    <p class="bdb mlr20 mtb10"></p>
                    <div class="flex flex_sa">
                        <p class="flex  column">
                            <i>{{inf.eqOnlineCount}}台</i>
                            <i class="mt10 nw">在线设备</i>
                        </p>
                        <p class="bdl mlr20"></p>
                        <p class="flex  column">
                            <i>{{inf.eqOfflineCount}}台</i>
                            <i class="mt10 nw">离线设备</i>
                        </p>
                    </div>
                </li>
            </ul>
        </div>
        <div class="flex mt10">
            <div class="bg9 flex_j column cf ph100 ft20  plr20 ">
                <i>自</i>
                <i class="mt10">提</i>
                <i class="mt10">柜</i>
            </div>
            <ul class="flex ul1 ml10 flex1 cf sb">
                <li class="bg9 ft20 flex_j column mr20 plr20 ptb20 tac">
                    <p class="flex column">
                        <i>销售额</i>
                        <i class="mt10 nw">{{inf.ebSalesAmount}}元</i>
                    </p>
                    <p class="bdb mlr20 mtb10"></p>
                    <div class="flex flex_sa">
                        <p class="flex  column">
                            <i>{{inf.ebSalesAmountM}}元</i>
                            <i class="mt10 nw">本月销售额</i>
                        </p>
                        <p class="bdl mlr20"></p>
                        <p class="flex  column">
                            <i>{{inf.ebSalesAmountYD}}元</i>
                            <i class="mt10 nw">昨日销售额</i>
                        </p>
                    </div>
                </li>
                <li class="bg9 ft20 flex_j column mr20 plr20 ptb20 tac">
                    <p class="flex column">
                        <i>订单数量</i>
                        <i class="mt10 nw">{{inf.ebOrderConut}}单</i>
                    </p>
                    <p class="bdb mlr20 mtb10"></p>
                    <div class="flex flex_sa">
                        <p class="flex  column">
                            <i>{{inf.ebOrderConutM}}单</i>
                            <i class="mt10 nw">本月订单数</i>
                        </p>
                        <p class="bdl mlr20"></p>
                        <p class="flex  column">
                            <i>{{inf.ebOrderConutYD}}单</i>
                            <i class="mt10 nw">昨日订单数</i>
                        </p>
                    </div>
                </li>
                <li class="bg9 ft20 flex_j column mr20 plr20 ptb20 tac">
                    <p class="flex column">
                        <i>退款金额</i>
                        <i class="mt10 nw">{{inf.ebRefundAmount}}元</i>
                    </p>
                    <p class="bdb mlr20 mtb10"></p>
                    <div class="flex flex_sa">
                        <p class="flex  column">
                            <i>{{inf.ebRefundAmountM}}元</i>
                            <i class="mt10 nw">本月退款金额</i>
                        </p>
                        <p class="bdl mlr20"></p>
                        <p class="flex  column">
                            <i>{{inf.ebRefundAmountYD}}元</i>
                            <i class="mt10 nw">昨日退款金额</i>
                        </p>
                    </div>
                </li>
                <li class="bg9 ft20 flex_j column mr20 plr20 ptb20 tac">
                    <p class="flex column">
                        <i>设备数量</i>
                        <i class="mt10 nw">{{inf.ebCount}}台</i>
                    </p>
                    <p class="bdb mlr20 mtb10"></p>
                    <div class="flex flex_sa">
                        <p class="flex  column">
                            <i>{{inf.ebOnlineCount}}台</i>
                            <i class="mt10 nw">在线设备</i>
                        </p>
                        <p class="bdl mlr20"></p>
                        <p class="flex  column">
                            <i>{{inf.ebOfflineCount}}台</i>
                            <i class="mt10 nw">离线设备</i>
                        </p>
                    </div>
                </li>
            </ul>
        </div>
        <div class="flex mt20">
            <div class="bg8 flex_j column cf ph100 ft20  plr20 ">
                <i>组</i>
                <i class="mt10">合</i>
                <i class="mt10">柜</i>
            </div>
            <ul class="flex ul1 ml10 flex1 cf sb">
                <li class="bg8 ft20 mr20 flex_j column plr20 ptb20 tac">
                    <p class="flex column">
                        <i>销售额</i>
                        <i class="mt10 nw">{{inf.cbSalesAmount}}元</i>
                    </p>
                    <p class="bdb mlr20 mtb10"></p>
                    <div class="flex flex_sa">
                        <p class="flex  column">
                            <i>{{inf.cbSalesAmountM}}元</i>
                            <i class="mt10 nw">本月销售额</i>
                        </p>
                        <p class="bdl mlr20"></p>
                        <p class="flex  column">
                            <i>{{inf.cbSalesAmountYD}}元</i>
                            <i class="mt10 nw">昨日销售额</i>
                        </p>
                    </div>
                </li>
                <li class="bg8 ft20 mr20 flex_j column plr20 ptb20 tac">
                    <p class="flex column">
                        <i>订单数量</i>
                        <i class="mt10 nw">{{inf.cbOrderConut}}单</i>
                    </p>
                    <p class="bdb mlr20 mtb10"></p>
                    <div class="flex flex_sa">
                        <p class="flex  column">
                            <i>{{inf.cbOrderConutM}}单</i>
                            <i class="mt10 nw">本月订单数</i>
                        </p>
                        <p class="bdl mlr20"></p>
                        <p class="flex  column">
                            <i>{{inf.cbOrderConutYD}}单</i>
                            <i class="mt10 nw">昨日订单数</i>
                        </p>
                    </div>
                </li>
                <li class="bg8 ft20 mr20 flex_j column plr20 ptb20 tac">
                    <p class="flex column">
                        <i>退款金额</i>
                        <i class="mt10 nw">{{inf.cbRefundAmount}}元</i>
                    </p>
                    <p class="bdb mlr20 mtb10"></p>
                    <div class="flex flex_sa">
                        <p class="flex  column">
                            <i>{{inf.cbRefundAmountM}}元</i>
                            <i class="mt10 nw">本月退款金额</i>
                        </p>
                        <p class="bdl mlr20"></p>
                        <p class="flex  column">
                            <i>{{inf.cbRefundAmountYD}}元</i>
                            <i class="mt10 nw">昨日退款金额</i>
                        </p>
                    </div>
                </li>
                <li class="bg8 ft20 mr20 flex_j column plr20 ptb20 tac">
                    <p class="flex column">
                        <i>设备数量</i>
                        <i class="mt10 nw">{{inf.cbCount}}台</i>
                    </p>
                    <p class="bdb mlr20 mtb10"></p>
                    <div class="flex flex_sa">
                        <p class="flex  column">
                            <i>{{inf.cbOnlineCount}}台</i>
                            <i class="mt10 nw">在线设备</i>
                        </p>
                        <p class="bdl mlr20"></p>
                        <p class="flex  column">
                            <i>{{inf.cbOfflineCount}}台</i>
                            <i class="mt10 nw">离线设备</i>
                        </p>
                    </div>
                </li>
            </ul>
        </div>
        <p class="ft20 mt20">数据统计</p>
        <div class="mt20" v-if="role!=4">
            <r-search :searchForm="searchForm" :searchHandle="searchHandle" :searchData="searchData" />
        </div>
        <div class="block mtb20">
            <el-date-picker v-model="value" type="daterange" range-separator="-" start-placeholder="开始日期" value-format="yyyy-MM-dd" @change="changedeta" end-placeholder="结束日期">
            </el-date-picker>
            <el-button type="primary" @click="value=''">重置</el-button>
        </div>

        <r-table style="height:400px" :isSelection="false" :isPagination="true" :tableData="tableData" :tableCols="tableCols" :tablePage="tablePage" @refresh="init()"></r-table>

        <div class="mod-demo-echarts mt20">
            <el-row :gutter="20">
                <el-col :span="24">
                    <el-card>
                        <div id="J_chartLineBox" class="chart-box"></div>
                    </el-card>
                </el-col>
            </el-row>
        </div>
    </div>
</template>
<script>
import CountTo from 'vue-count-to'
import { mapState, mapMutations, mapActions } from 'vuex'
export default {
    components: {
        CountTo,
    },
    data() {
        return {
            chartLine: null,
            inf: {},
            value: [],
            role: '',
            searchData: {
                regionalId: '',
                mchId: '',
            },
            searchForm: [
                {
                    type: 'select',
                    prop: 'regionalId',
                    placeholder: '代理商',
                    width: 150,
                    isShow: e => sessionStorage.getItem('role') == 3 ? false : true,
                    options: [
                    ],
                },
                {
                    type: 'select',
                    prop: 'mchId',
                    placeholder: '商家',
                    width: 150,
                    isShow: e => sessionStorage.getItem('role') == 4 ? false : true,
                    options: [
                    ],
                },
            ],
            searchHandle: [
                {
                    label: '搜索',
                    type: 'success',
                    icon: 'el-icon-search',
                    handle: e => this.search()
                },
                {
                    label: '重置',
                    icon: 'el-icon-refresh-right',
                    handle: e => this.searchFromReset()
                }
            ],
            tableData: [
            ],
            tableCols: [
                {
                    label: '日期',
                    prop: 'ydm',
                    width:100,
                    // theme: e => e.status ? 'primary' : 'danger', type: "tag",
                },
                {
                    label: '生鲜柜订单',
                    prop: 'orderCount1',
                    // theme: e => e.status ? 'primary' : 'danger', type: "tag",
                },
                {
                    label: '生鲜柜销售额',
                    prop: 'salesAmount1'
                },
                {
                    label: '售袋订单',
                    prop: 'orderCount4',
                },
                {
                    label: '售袋销售额',
                    prop: 'salesAmount4',
                },
                {
                    label: '售卡订单',
                    prop: 'orderCount5'
                },
                {
                    label: '售卡销售额',
                    prop: 'salesAmount5'
                },
                {
                    label: '自提订单',
                    prop: 'orderCount2'
                },
                {
                    label: '自提销售额',
                    prop: 'salesAmount2'
                },
                {
                    label: '送货订单',
                    prop: 'orderCount3'
                },
                {
                    label: '送货销售额',
                    prop: 'salesAmount3'
                },
            ],
            tablePage: { limit: 10, page: 1, total: 0 },
            option: {}
        };
    },
    created() { },
    mounted() {
        this.role = sessionStorage.getItem('role')

        this.init()
    },
    activated() {
        // 由于给echart添加了resize事件, 在组件激活时需要重新resize绘画一次, 否则出现空白bug
        if (this.chartLine) {
            this.chartLine.resize()
        }
    },
    computed: {
        ...mapState({

        })
    },
    methods: {
        changedeta() {
            this.init()
        },
        ...mapMutations({

        }),
        async init() {
            let res = await this.api.getTotal({
            })
            if (res) {
                this.inf = res.data
            }

            let operatorId = ''
            let resOpt = await this.api.getOperatorList({})
            if (resOpt) {
                operatorId = resOpt.data.operatorId
            }
            let resAgent = await this.api.getAgentList({
                userId: operatorId
            })
            let resMerchant = await this.api.getMerchantList({
                userId: operatorId
            })
            if (resAgent) {
                // this.searchForm[2].options = resAgent.data
                this.searchForm[0].options = []
                for (let i = 0; i < resAgent.data.length; i++) {
                    this.searchForm[0].options.push({
                        label: resAgent.data[i].name,
                        value: resAgent.data[i].agentId
                    })
                }
            }
            if (resMerchant) {
                this.searchForm[1].options = []
                for (let i = 0; i < resMerchant.data.length; i++) {
                    this.searchForm[1].options.push({
                        label: resMerchant.data[i].name,
                        value: resMerchant.data[i].merchantId
                    })
                }
            }
            this.initChartLine()
            this.search()
        },
        async search() {
            let res2 = await this.api.getTotaltable({
                ...this.tablePage,
                stime: this.value[0],
                etime: this.value[1],
                regionalId: this.searchData.regionalId,//|| sessionStorage.getItem('role')==3?sessionStorage.getItem('userId'):''
                mchId: this.searchData.mchId,// || sessionStorage.getItem('role')==4?sessionStorage.getItem('userId'):''
            })
            if (res2) {
                this.tablePage.total = res2.data.total
                this.tableData = res2.data.records
                this.option.xAxis.data = []
                this.option.series.map(item => item.data = [])
                this.tableData.map(item => {
                    console.log(item.ydm);
                    this.option.xAxis.data.push(item.ydm)
                    this.option.series[0].data.push(item.salesAmount1)
                    this.option.series[1].data.push(item.salesAmount2)
                    this.option.series[2].data.push(item.salesAmount3)
                    this.option.series[3].data.push(item.salesAmount5)
                    this.option.series[4].data.push(item.salesAmount4)
                })
                this.chartLine.setOption(this.option)
            }
        },
        initChartLine() {
            this.option = {
                'title': {
                    'text': '统计折线图'
                },
                'tooltip': {
                    'trigger': 'axis'
                },
                'legend': {
                    'data': ['生鲜柜销售额', '自提销售额', '送货销售额', '售卡销售额', '售袋销售额']
                },
                'grid': {
                    'left': '3%',
                    'right': '4%',
                    'bottom': '3%',
                    'containLabel': true
                },
                'toolbox': {
                    'feature': {
                        'saveAsImage': {}
                    }
                },
                'xAxis': {
                    'type': 'category',
                    'boundaryGap': false,
                    'data': []
                },
                'yAxis': {
                    'type': 'value'
                },
                'series': [
                    {
                        'name': '生鲜柜销售额',
                        'type': 'line',
                        'stack': '总量',
                        'data': []
                    },
                    {
                        'name': '自提销售额',
                        'type': 'line',
                        'stack': '总量',
                        'data': []
                    },
                    {
                        'name': '送货销售额',
                        'type': 'line',
                        'stack': '总量',
                        'data': []
                    },
                    {
                        'name': '售卡销售额',
                        'type': 'line',
                        'stack': '总量',
                        'data': []
                    },
                    {
                        'name': '售袋销售额',
                        'type': 'line',
                        'stack': '总量',
                        'data': []
                    }
                ]
            }
            this.chartLine = echarts.init(document.getElementById('J_chartLineBox'))
            this.chartLine.setOption(this.option)
            window.addEventListener('resize', () => {
                this.chartLine.resize()
            })
        },
    },
};
</script>
<style scoped >
.bdb {
  border-bottom: 1px solid #e5e5e5;
}
</style>
<style scoped lang="scss">
ul {
  li {
    min-width: 300px;
    width: 23%;
    height: 230px;
  }
}
.bg1 {
  background: #58a3f7;
}
.bg2 {
  background: #df5986;
}
.bg3 {
  background: #dea835;
}

.bg4 {
  background: #ff6699;
}

.bg5 {
  background: #fec03d;
}

.bg6 {
  background: #fb6260;
}

.bg7 {
  background: #3366cc;
}

.bg8 {
  background: #006699;
}
.bg9 {
  background: #006633;
}
.bg10 {
  background: #3399ff;
}
.border-r1 {
  padding: 5px 10px;
  border-radius: 3px;
}
.sw {
  white-space: pre-wrap;
}
.mod-demo-echarts {
  > .el-alert {
    margin-bottom: 10px;
  }
  > .el-row {
    margin-top: -10px;
    margin-bottom: -10px;
    .el-col {
      padding-top: 10px;
      padding-bottom: 10px;
    }
  }
  .chart-box {
    min-height: 400px;
  }
}
</style>

